<template>
  <div class="app-container">
      <div class="app-contain">
        <el-card class="box-card">
            <div slot="header" class="clearfix" >
              <span>用户权限管理</span>
              <el-button class="btnstyle" type="warning" plain @click="removepomiss">清空</el-button>
              <el-button class="btnstyle" type="danger" plain @click="deletepomiss">删除选中权限</el-button>
              <el-button class="btnstyle" type="primary" plain @click="addpomiss">增加权限</el-button>
            </div>
                <el-input placeholder="请输入要搜索的权限名称" v-model="SystemSole" style="margin-bottom: 20px">
                  <template slot="prepend">SYSTEMS:</template>
                </el-input>
            <el-collapse title="名称"  @change="change" accordion>
                <el-collapse-item :name="sys.id" :title="sys.title"  accordion v-for="(sys,index) in systems" :key="index">
                  <el-tree
                    :data="allMenus"
                    show-checkbox
                    accordion
                    :props="defaultProps">
                  </el-tree>
                </el-collapse-item>
            </el-collapse>
        </el-card>
      </div>
</div>
</template>
<script>
import request from "@/utils/request";

export default {
  name: 'System',
  data() {
    return {
      systems:[],
      allMenus:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      SystemSole:'',
    }
  },
  created() {
    this.collapseItem()
  },
  methods:{
    change(sid){//所带参数是el-collapse中的name属性值
      if (sid){
        this.getallMeuns()
      }

    },
    getallMeuns(){//获取系统管理权限信息
      request.post('/systems').then( (resp)=>{
        if (resp){
          this.allMenus =resp.data
        }
      })
    },
    collapseItem(){
      request.post('/systems/user').then( (resp)=>{
        if (resp){
          this.systems =resp.data
        }
      })
    },
    //增加权限
    addpomiss(){
      alert('网络繁忙！！')
    },
    //删除选中权限
    deletepomiss(){
      alert('网络繁忙！！')
    },
    //清空
    removepomiss(){
      this.SystemSole =''
      alert('网络繁忙！！')
    }
  }
}
</script>

<style scoped>
.app-contain{
  width: 90%;
  margin: 15px 0;
}
.btnstyle{
 float: right;
  padding: 7px 4px;
  margin-right: 10px;
}

</style>
